import * as React from 'react'
import {useRoutes} from 'react-router-dom'
import routesObj from './routes'

const App: React.FC = ({children}) => {
  let routes = useRoutes(routesObj)
  return (
    <div>
      <h1>这是一个React，routes对象配置风格案例</h1>
      <ul>
        <p>1. 创建一个routes对象，类型注解为：RoutesObject</p>
        <p>
          2.
          在app中通过useRoutes的hook，调用并传递routes配置对象，将返回值放到组件中占位
        </p>
        <p>3. 在main中通过BrowserRouter组件包裹App组件令其路由全局生效</p>
        <p>4. 在layout中使用Outlet组件放置到需要展示路由组件的合适位置</p>
        <p>最后，通过Link标签或函数式路由跳转方式跳转路由即可</p>
      </ul>
      {routes}
    </div>
  )
}

export default App
